<template>

        <div id="box">
            <el-collapse class="con" v-model="activeName" accordion>
                <el-collapse-item name="1">
                    <template slot="title">
                        <i class="header-icon el-icon-mobile-phone"></i>手机号码
                    </template>
                    <div>
                        <h3 style="margin-bottom: 10px" v-if="user.phone!=null">{{showPhone(user.phone)}}</h3>
                        <el-input
                                style="margin-bottom: 10px"
                                placeholder="请输入旧号码"
                                maxlength="11"
                                show-word-limit
                                v-model="oldPhone"
                                clearable>
                        </el-input>
                        <el-input
                            placeholder="请输入新号码"
                            v-model="newPhone"
                            maxlength="11"
                            show-word-limit
                            clearable>
                            <el-button @click.stop="updatePhone" slot="append">修改</el-button>
                        </el-input>
                    </div>
                </el-collapse-item>
                <el-collapse-item  name="2" class="addressContainer">
                    <template slot="title">
                        <i class="header-icon el-icon-notebook-1"></i>收货地址
                    </template>
                    <div class="addressItem" v-if="address.length!=0" v-for="(item,i) in address" :key="item.addressId">
                        <div class="addressItemLeft">
                            <span>
                                <p>{{item.contactName}}</p>
                                <p v-if="item.gender==1">先生</p>
                                <p v-else>女士</p>
                                <p>{{item.contactPhone}}</p>
                            </span>
                            <span>
                                {{item.address}}
                            </span>
                        </div>
                        <div class="addressItemRight">
                            <i @click.stop="to('edit',item)" class="el-icon-edit-outline"></i>
                            <i @click.stop="deleteAddress(item.addressId)" class="el-icon-delete"></i>
                        </div>
                    </div>
                    <div v-if="address.length==0">
                        暂时没有收货地址
                    </div>
                    <el-button type="primary"  @click.stop="to('add')">添加收货地址</el-button>
                </el-collapse-item>
                <el-collapse-item name="3">
                    <template slot="title">
                        <i class="header-icon el-icon-bank-card"></i>支付密码
                    </template>
                    <div>
                        <el-input
                                style="margin-bottom: 10px"
                                placeholder="请输入旧的支付密码"
                                maxlength="6"
                                show-word-limit
                                v-model="oldPayCode"
                                clearable>
                        </el-input>
                        <el-input
                                style="margin-bottom: 10px"
                                placeholder="请输入新的支付密码"
                                maxlength="6"
                                show-word-limit
                                v-model="newPayCode"
                                clearable>
                        </el-input>
                        <el-input
                                placeholder="请再次输入新的支付密码"
                                maxlength="6"
                                v-model="newPayCode1"
                                show-word-limit
                                clearable>
                            <el-button @click.stop="updatePayCode" slot="append">修改</el-button>
                        </el-input>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="4">
                    <template slot="title">
                        <i class="header-icon el-icon-picture-outline"></i>头像
                    </template>
                    <div>
                        <avatar @handleSuc="handleSuc"></avatar>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <el-drawer
                    :title="formAction=='add'?'添加收货地址':'修改收货地址'"
                    :visible.sync="dialog"
                    direction="btt"
                    size="100%"
                    :destroy-on-close="true"
                    custom-class="demo-drawer"
                    ref="drawer"
                    :modal="false">
                <addressAddForm v-if="formAction=='add'" @handleSuc="handleSuc" @cancel="cancel"></addressAddForm>
                <addressEditForm :oldObj="oldObj"  v-if="formAction=='edit'" @handleSuc="handleSuc" @cancel="cancel"></addressEditForm>
            </el-drawer>
        </div>

</template>

<script>
    import addressAddForm from "../subComs/addressAddForm.vue";
    import addressEditForm from "../subComs/addressEditForm.vue";
    import avatar from "../subComs/avatarUploadForm.vue";
    export default {
        name: "setting",
        components:{
            addressAddForm,addressEditForm,avatar
        },
        data() {
            return {
                oldObj:'',
                activeName: '1',
                formAction:'',
                user:'',
                newPayCode:'',
                newPayCode1:'',
                oldPayCode:'',
                oldPhone:'',
                newPhone:'',
                address:[],
                dialog: false,
            };
        },
        methods:{
            showPhone(phone){
                let prefix = this.user.phone.slice(0,3)
                let suffix = this.user.phone.slice(-4)
                return prefix + 'xxxx' +  suffix
            },
            to(name,oldObj){
                this.formAction = name
                this.dialog = true
                this.oldObj = oldObj
            },
            cancel(){
                this.oldObj=''
                this.dialog=false
                this.$refs.drawer.closeDrawer()
                this.getAddress()
            },
            handleSuc(){
                this.oldObj=''
                this.getAddress()
                this.getUser()
                this.dialog=false
                this.$emit('updateSuc')
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {});
            },
            deleteAddress(id){
                this.$axios({
                    methods:'delete',
                    url:'/user/deleteAddress',
                    params:{
                        addressId:id
                    }
                }).then(r=>{
                    if(r.data.err_code===1){
                        return this.$message.error('网络错误，请稍后再试')
                    }
                    this.$message.success('删除成功')
                    this.getAddress()
                })
            },
            getAddress(){
                this.$axios({
                    methods:'get',
                    params:{
                        userId:this.$store.getters.getId
                    },
                    url:'/user/getAddress'
                }).then(r=>{
                    if(r.data.err_code===0){
                        return this.address = r.data.address
                    }
                    this.address = []
                })
            },
            getUser(){
                this.$axios({
                    method:'get',
                    url:'/user/getUser',
                    params:{
                        nick:this.$store.state.user.nick
                    }
                }).then(r=>{
                    if(r.data.err_code===0){
                        this.$store.state.user = this.user = r.data.user
                        return sessionStorage.setItem("user",window.JSON.stringify(r.data.user))
                    }
                    this.$message.error('网络忙，请稍后重试')
                })
                // this.user = 
            },
            updatePhone(){
                if(!this.$verifyPhone(this.newPhone)) return
                this.$axios.post('/user/updatePhone',{
                    userId:this.user.userId,
                    oldPhone:this.oldPhone,
                    newPhone:this.newPhone
                }).then(r=>{
                    if(r.data.err_code==0){
                        this.$message.success('修改成功')
                        this.$store.state.user.phone = this.newPhone
                        this.newPhone=''
                        this.oldPhone=''
                        this.getUser()
                    }else{
                        this.$message.error('旧号码错误！')
                    }
                })
            },
            updatePayCode(){
                if(this.newPayCode!=this.newPayCode1){
                    return this.$message.warning('两次输入的密码不一致！')
                }
                this.$axios.post('/user/updatePayCode',{
                    userId:this.user.userId,
                    oldPayCode:this.oldPayCode,
                    newPayCode:this.newPayCode
                }).then(r=>{
                    if(r.data.err_code==0){
                        this.$message.success('修改成功')
                        this.getUser()
                        this.oldPayCode=this.newPayCode=this.newPayCode1=''
                    }else{
                        this.$message.error('旧支付密码错误！')
                    }
                })
            }

        },
        created() {
            this.getUser()
            this.getAddress()
        }
    }
</script>

<style lang="less" scoped>
    .header-icon{
        font-size: 20px;
        margin-right: 10px;
}
    /deep/ .el-collapse-item__content{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .addressContainer{
        .addressItem{
            padding-bottom: 10px;
            border-bottom: 1px solid #F6F6F6;
            display: flex;
            justify-content: space-between;
            .addressItemLeft{
                display: flex;
                flex-direction: column;
                span:first-child{
                    p{
                        font-weight: 800;
                    }
                }
                span{
                    display: flex;
                    p{
                        padding-right: 5px;
                    }
                }
            }
            .addressItemRight{
                padding-right: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 25px;
                color: #989898;
                i{
                    padding: 0 5px;

                }
            }
        }
    }
    #box{
        display: flex;
        justify-content: center;
        overflow: scroll;
        height:800px;
        .con{
            width: 95%;

        }
    }


</style>